
<!-- 动态表单，根据给定的表单参数，动态生成表单对话框 -->
<template>
    <div>
        <el-form ref="ruleFormRef" :rules="realrules" :model="realform" label-width="120px">
            <!-- 表单项 -->
            <el-form-item v-for="(item, index) in optionList" :prop="item.model" :label="item.label" :key="index">
                <!-- 表单项具体内容实现 -->
                <FormItemSelect :itemType="item.type" v-model="realform[item.model]" :defaultValue="item.defaultValue"
                    :selectItems="item.selectItems" />
            </el-form-item>
            <!-- 按钮操作 -->
            <el-form-item>
                <el-button type="primary" @click="onsubmit(ruleFormRef)">Create</el-button>
                <el-button @click="onreset(ruleFormRef)">Reset</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { defineEmits, defineProps, ref, reactive } from "vue";
import FormItemSelect from "@/components/dialog/components/formItemSelect.vue";
import type { FormInstance, FormRules } from 'element-plus'
import { RuleForm } from "@/typings/table";
import { useTableStore } from "@/store/modules/table";
const TableStore = useTableStore();
const prop = defineProps<{
    form: any;
    optionList: any[]
    rules: FormRules<RuleForm>
}>();
const ruleFormRef = ref<FormInstance>()
const realform = ref(prop.form)
const realrules = reactive<FormRules<RuleForm>>(prop.rules)

// 定义事件  父类传递的事件
const emit = defineEmits([
    'submitClick',
    'resetClick'
])
//表单提交
const onsubmit = (formEl: FormInstance | undefined) => {
    emit('submitClick', formEl)
}

//重置表单
const onreset = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields();
    //表单更新标志
    TableStore.tableReset = !TableStore.tableReset
}
</script>

<style scoped></style>
